import { motion } from 'framer-motion'
import { API, BASE_PATH } from '@/config'
import { navigateTo } from '@/utils'
import { useRouter } from 'next/router';
import CardSwiper from './components/CardSwiper';
import { Button, Grid, AutoCenter, Space } from 'antd-mobile';
import callFeedback from '@/components/common/modalFeedback';
import requewt from '@/utils/requewt';
import { useEffect, useRef, useState } from 'react';
const carVar = {
  hidden: { x: `0`, opacity: 0 },
  visible: {
    x: 0,
    opacity: 0,
    transition: {
      delay: .4
    }
  },
  exit: {
    x: `100%`
  }
}

const containerVar = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      delayChildren: 0.05,
      staggerChildren: 0.05,
    }
  },
  exit: { y: 50, opacity: 0 },
};
const Game = () => {
  const gameCanvas = useRef()
  const player = useRef({
    x: 0,
    y: 0,
    width: 113,
    height: 56,
    // width: 90,
    // height: 130,
    image: new Image(),
  })
  const items = useRef([])
  const defaultX = useRef(0)
  const handleTouch = (e) => {
    // console.log(e, 'eeee')
    // e.preventDefault();
  }
  const movePlayer = (event) => {
    const canvas = gameCanvas.current;

    const context = canvas.getContext('2d');
    const touch = event.touches[0];

    player.current.x = Math.max(
      0,
      Math.min(
        touch.pageX - canvas.offsetLeft - player.current.width / 2,
        canvas.width - 286
      )
    );
    // updateGame()
    context.clearRect(0, 0, canvas.width, canvas.height)
    console.log(player.current)
    context.drawImage(
      player.current.image,
      player.current.x,
      player.current.y,
      player.current.width,
      player.current.height
    )
    // drawPlayer()
  }
  const drawPlayer = () => {
    const canvas = gameCanvas.current;
    const context = canvas.getContext('2d');
    player.current.image.onload = () => {
      context.drawImage(
        player.current.image,
        player.current.x,
        player.current.y,
        player.current.width,
        player.current.height
      );
    }

  }
  const drawItems = () => {
    const canvas = gameCanvas.current;
    const context = canvas.getContext('2d');

    for (let i = 0; i < items.current.length; i++) {
      const item = items.current[i];
      context.drawImage(item.image, item.x, item.y, item.width, item.height);
    }
  }
  const updateGame = () => {
    const canvas = gameCanvas.current;
    const context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawPlayer();
    drawItems();
    // console.log('xxxxx')
    // const deltaTime = Date.now() - prevTime;
    // prevTime = Date.now();

    // for (let i = 0; i < this.items.length; i++) {
    //   const item = this.items[i];
    //   // 更新y轴位置
    //   item.y = this.itemSpeed * deltaTime + item.y;
    //   // 检测碰撞
    //   if (
    //     item.y + item.height >= this.player.y &&
    //     item.y <= this.player.y + this.player.height &&
    //     item.x >= this.player.x &&
    //     item.x + item.width <= this.player.x + this.player.width
    //   ) {
    //     this.score += item.value;
    //     this.items.splice(i, 1);
    //     this.showAnimation('分数+5', item.x, item.y);
    //   }
    // }

    // this.remainingTime = Math.max(
    //   this.gameDuration - Math.floor((Date.now() - this.gameStartTime) / 1000)
    // );

    // //提高物体速度 增加游戏难度
    // this.itemSpeed = ((Date.now() - this.gameStartTime) / 1000) * 0.008 + 1;

    // // 游戏结束
    // if (this.remainingTime === 0) {
    //   this.gameOver = true;
    //   gameEnd({
    //     score: this.score,
    //   })
    //     .then((res) => {
    //       const { data = {} } = res;
    //       this.isChance = data.get_chance;
    //       this.remain_draw_num = data.remain_draw_num;
    //       this.$emit('updataLotteryTimes');
    //     })
    //     .catch((err) => {
    //       this.$emit('updataLotteryTimes');
    //     });
    // } else {
    // requestAnimationFrame(updateGame);
    // }
  }
  const generateItem = () => {
    const item = {
      x: Math.random() * (this.canvasWidth - 40),
      y: 0,
      width: 45,
      height: 45,
      // 分数
      value: 5,
      image: new Image(),
    };
    item.image.src = window.selectedImage.l;
    items.current.push(item);
  }
  const startGame = () => {
    // updateGame()
  }
  const initGame = () => {
    const canvas = gameCanvas.current;
    const context = canvas.getContext('2d');

    canvas.width = global.innerWidth;
    canvas.height = global.innerHeight;
    player.current.width = 113;
    player.current.height = 56;
    player.current.image.src = `${BASE_PATH}/img/game/basket.png`;
    player.current.x = defaultX.current = canvas.width / 2 - 286 / 2;
    player.current.y = canvas.height - 130; //调节高度
    // this.player.image.src = new URL(`/images/cup.png`, import.meta.url).href;


    setInterval(generateItem, 500);

    startGame();
  }
  useEffect(() => {
    initGame()
    updateGame()
  }, [])
  return (
    <div className='game-warpper' id='pixi-container' >
      <div className="canvas_box" onTouchStart={handleTouch} onTouchMove={handleTouch} onTouchEnd={handleTouch}>
        <canvas id="gameCanvas" ref={gameCanvas} onTouchMove={movePlayer}>

        </canvas>
      </div>
    </div>
  )
}

export default Game